<template>
  <Middle class="middle">
    <el-card>
      <el-row class="container">
        <div class="box-left">
          <el-row class="search">
            <el-input suffix-icon="el-icon-search" placeholder="搜索联系人"></el-input>
          </el-row>
          <el-row class="list">
            <el-collapse accordion v-model="activeNames" @change="handleChange">
              <el-collapse-item name="private">
                <template slot="title">
                  <el-row class="title">私聊</el-row>
                </template>
                <template v-for="user in privateUsers">
                  <el-row :class="{'list-item':true,'selected':$route.params.to==user.id}"
                          @click.native="chatToSomebody(user)">
                    <el-row class="left">
                      <el-avatar :src="user.imageUrl"/>
                    </el-row>
                    <el-row class="right">
                      <div class="top">
                        <span class="name">{{ user.nickName }}</span>
<!--                        <span class="time">{{ timeFormat(message.updateTime, 'MM-dd hh:mm') }}</span>-->
                      </div>
                      <div class="bottom">
<!--                        <span class="message">{{ message.msg }}</span>-->
                      </div>
                    </el-row>
                  </el-row>
                </template>
              </el-collapse-item>

              <el-collapse-item name="all">
                <template slot="title">
                  <el-row class="title">最近上线</el-row>
                </template>
                <template v-for="message in filterUser(messageList)">
                  <el-row class="list-item" @click.native="chatToSomebody(message.user)">
                    <el-row class="left">
                      <el-avatar :src="message.user.imageUrl"/>
                    </el-row>
                    <el-row class="right">
                      <div class="top">
                        <span class="name">{{ message.user.nickName }}</span>
                      </div>
                    </el-row>
                  </el-row>
                </template>
              </el-collapse-item>
            </el-collapse>
          </el-row>
        </div>
        <!-- 聊天记录 -->
        <div class="box-right">
          <el-row class="message">
            <el-row class="title">
              {{ title }}
            </el-row>
            <el-row class="box">
              <div
                  v-for="(item, index) in filterMessage(messageList)"
                  :key="index.toString()"
                  class="item"
              >
                <el-row class="message-item" v-if="user.id == item.user.id">
                  <myMessage :message="item.msg" :user="item.user"></myMessage>
                </el-row>
                <el-row v-else class="message-item">
                  <otherMessage :message="item.msg" :user="item.user"></otherMessage>
                </el-row>
              </div>
            </el-row>
          </el-row>
          <el-row class="input-container">
            <el-input class="input" type="textarea" @keyup.native.enter="clickButton" v-model="input"></el-input>
            <el-row class="btn">
              <el-button type="primary" @click="clickButton">发送</el-button>
            </el-row>
          </el-row>
        </div>
      </el-row>
    </el-card>
  </Middle>
</template>

<script>
import {getToken} from "@/utils/auth";
import {timeFormat} from "@/utils/utils";
import Middle from "@/views/layout/Middle";
import myMessage from "./myMessage";
import otherMessage from "./otherMessage";
import "@/utils/socket";
import {getRecord} from "@/api/qiniuyun";

export default {
  name: "Client",
  components: {Middle, myMessage, otherMessage},
  sockets: {
    connect: () => {
      console.log("socket connected");
    },
    res: (val) => {
    },
  },
  data() {
    return {
      title: {'all': "大厅聊天", 'private': '私聊'}[this.$route.params.to === 'all' ? 'all' : 'private'],
      to: this.$route.params.to,
      currentMessageList:[],
      messageList: [],
      user: getToken(),
      input: "",
      activeNames: 'all',
      privateUsers: [],
    };
  },
  watch: {
    to(value) {
      console.log(value)
    }
  },
  async created() {
  },
  mounted() {
    this.sockets.subscribe("res", (val) => {
      console.log("接收到服务端消息", val);
      this.messageList.push(val);
    })
  },
  methods: {
    timeFormat,
    chatToSomebody(user) {
      if (this.$route.params.to == user.id) return this.to
      this.$router.replace(`/message/${user.id}`)
      this.to = this.$route.params.to
      if (!this.privateUsers.find(target => target.id === user.id))
        this.privateUsers.push(user)
      this.title = user.nickName
      this.activeNames = 'private'
      console.log(user)
    },
    filterMessage(messageList) {
      const user = getToken()
      if (this.to === 'all')
        return messageList.filter(message => message.to === 'all')
      else
        return messageList.filter(message => (message.to == user.id || message.from == user.id)&&message.to!=='all')
    },
    filterUser(messageList) {
      const hash = []
      const res = []
      messageList.filter(message => {
        const index = hash.indexOf(message.user.id)
        if (index >= 0) {
          res.splice(index, 1, message)
          return false
        } else if (message.id !== getToken().id) {
          hash.push(message.user.id)
          res.push(message)
          return true
        }
        return false
      })
      return res
    },
    handleChange(val) {
      if (val === 'all') {
        this.title = '大厅聊天'
        this.to = 'all'
        if (this.$route.params.to !== 'all') this.$router.replace(`/message/all`)
      }

    },
    clickButton: function () {
      if (!this.input) return
      const user = getToken();
      this.$socket.emit("chat", {
        user: {
          id: user.id,
          username: user.username,
          nickName: user.nickName,
          imageUrl: user.imageUrl,
        },
        from: user.id,
        msg: this.input,
        to: this.to,
        updateTime: new Date()
      });
      this.input = "";
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .el-card__body {
  padding: 0;
}

.container {
  display: flex;
  background-color: #fff;
}

.box-left {
  width: 300px;
  border-right: 1px solid #eee;

  .search {
    padding: 20px;
  }

  .list {

    .title {
      padding: 10px 20px;
    }

    .list-item {
      padding: 10px 20px;
      display: flex;
      align-items: center;
      border-top: 1px solid #eee;

      &.selected {
        background-color: #F6F6F6;
      }

      .right {
        padding-left: 20px;
        flex: 1;

        .top {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .name {
            font-size: 15px;
            color: #444;
          }

          .time {
            color: #999
          }
        }

        .bottom {
          color: #999;
        }
      }
    }
  }
}

.box-right {
  display: flex;
  flex-direction: column;
  height: 80vh;
  width: 700px;

  .input-container {
    border-top: 1px solid #eee;
    padding: 20px;
    margin-top: auto;

    /deep/ .el-textarea__inner {
      height: 100px;
      resize: none;
      border: none;
    }

    .btn {
      display: flex;
    }

    .el-button {
      margin-left: auto;
    }
  }

  .message {
    flex: 1;
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column;

    .title {
      border-bottom: 1px solid #eee;
      text-align: center;
      font-weight: 600;
      padding: 10px 0;
    }

    .box {
      overflow-y: scroll;
      overflow-x: hidden;
      height: 320px;
    }
  }
}


</style>
